//入口文件
import Vue from 'vue'
import app from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// import { Header } from 'mint-ui';
import VUeResource from 'vue-resource'
Vue.use(VueResource)
//导入格式化插件
import moment from 'moment'
Vue.filter('dateFormat',function(dataStr,pattern="YYYY-MM-DD HH:mm:ss"){
    return moment(dataStr).format(pattern)
})
//导入vuex
import Vuex from 'vuex'
Vue.use(Vuex)
import './lib/dist/css/mui.min.css'
import './lib/dist/css/icons-extra.css'
import './lib/dist/fonts/mui-icons-extra.ttf'
import './router.js'
import router from './router.js';

import VueResource from 'vue-resource';


Vue.http.options.root='http://www.liulongbin.top:3005/'
//全局设置post表单格式组织形式
Vue.http.options.emulateJSON=true;

// 按需导入Mint-UI组件
// Vue.component(Header.name, Header);
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// import { Lazyload } from 'mint-ui';
// Vue.use(Lazyload);
// Vue.component(Button.name, Button);
// import { Swipe, SwipeItem } from 'mint-ui';
// import { Button } from 'mint-ui';

//全局加载mint-UI
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
//引用VuePreview并挂载到Vue身上
import VuePreview from 'vue-preview'
Vue.use(VuePreview);
//每次进入网站,调用main.js,刚调用的时候把购物车的数据读出来,放到store中
var car =JSON.parse(localStorage.getItem('car')||'[]')
var store=new Vuex.Store({
    state: {
        car:car
    },
    mutations: {
        addToCar(state,goodsinfo){//把商品添加到购物车,如果购物车中之前就有对应的商品,那么只需要更新数据,
            //如果没有则直接吧数据更新到购物车就行
            var flag=false//如果购物车中没有找到商品
            state.car.some(item=>{
                if(item.id==goodsinfo.id){
                    item.count+=parseInt(goodsinfo.count);
                    flag=true  
                    return true
                }
            })
            if(!flag){//循环结束,flag还是false
                state.car.push(goodsinfo)
            }
            //更新car之后,把car数组存储到本地的localStorage中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateGoodsInfo(state,goodsinfo){//修改购物车中商品的数量值每当购物车的数量值改变则立即把最新的数据同步到购物车的store中,覆盖之前的数据
            state.car.some(item=>{
                if(item.id==goodsinfo.id){
                    item.count=parseInt(goodsinfo.count)
                    return true
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        removeFormCar(state,id){//根据id从store中的购物车中删除对应的那条商品数据
            state.car.some((item,i)=>{
                if(item.id==id){
                    state.car.splice(i,1)
                    return true;
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))

        },
        updateGoodsSelected(state,info){//数据勾选状态的改变
            state.car.some(item=>{
                if(item.id==info.id){
                    item.selected=info.selected//将info的状态同步到item中去
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        }
        
    },
    getters:{//相当于计算属性,不需要关心再加一条商品要怎么重新计算,自己就会改变
        getAllCount(state){
            var c=0;
            state.car.forEach(item=>{//car中的所有数据加起来,提供给徽标
                c+=item.count//循环所有商品的数量嫁给c
            })
            return c;
        },
    getGoodsCount(state){//循环购物车列表的时候初始化数量值,思路,循环每一项获取id和商品数量
        var o= {};
        state.car.forEach(item=>{
            o[item.id]=item.count//每一项商品的id作为属性的键,每一项商品的数量作为属性的值
        })
        return o;
    },
    getGoodsSelected(state){//商品是否被勾选
        var o={}
        state.car.forEach(item=>{
            o[item.id]=item.selected//拼接处一个对象,商品的id是键,商品是否选中的状态是值
        })
        return o
    },
   getGoodsCountAndAmount(state){
       var o={
           count:0,//勾选的数量
           amount:0//勾选的总价
       }
       state.car.forEach(item=>{
           if(item.selected){
               o.count +=item.count
               o.amount +=item.price*item.count
           }
       })
       return o;
   } 
  
}
})
var vm=new Vue({
    el:'#app',
    data:{

    },
    render:c=>c(app),
    router,
    store//挂载状态管理对象
})